<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄： {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="checkTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  /*
   如果用原先的data,method和setup并列，那么Vue2的写法可以使用，但不推荐

   另外，data可以调用setup中的数据，但setup不能调用data中的数据
  */

  //组件名
  name: "Person",
  //不能在 setup 里用 this 关键字
  setup() {
    let name = "张三";
    let age = 18;
    let tel = "123456789";

    //这些数据不是响应式的，调用的是固定值，不会发生变化

    function changeName() {
      name = "zhang-san";
    }

    function changeAge() {
      age += 1;
    }

    function checkTel() {
      alert(tel);
    }

    //数据不能在 return 后写，return 后写的都不奏效
    //return 相当于答卷，所有数据和方法都要在其中声明一下，否则都无法调用
    return {
      //这里前一个是属性名，后一个是data中的属性值
      //相当于：{ a:name, b:age }, 在template中调用{{a}}和{{b}}
      name: name,
      age: age,
      tel: tel,
      changeName,
      changeAge,
      checkTel,
    };
  },
};
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>